import { useWindowSize } from '@vueuse/core'
import { computed, ref } from 'vue'
import useMainStore from '@renderer/store/modules/useMainStore'
import * as PIXI from 'pixi.js'
import { createSprite } from '@renderer/utils/bundle'

const { width, height } = useWindowSize()
const mainStore = useMainStore()
const spaceUsage = ref({
  left: {
    height: 0,
    width: 0,
  },
  right: {
    height: 0,
    width: 0,
  },
})

const bgScaleRef = ref({
  x: 1,
  y: 1,
})

export const bgScale = (x: number, y: number): void => {
  bgScaleRef.value.x = x
  bgScaleRef.value.y = y
}
/** 分割线 */
export const getDividing = async (pi: number = 0): Promise<PIXI.Sprite> => {
  const sprite = await createSprite('dividing')
  sprite.anchor.set(0.5)
  sprite.rotation = pi
  return sprite
}
/** 重置两侧空间占用*/
export const resetSpaceUsage = (): void => {
  spaceUsage.value.left.height = 0
  spaceUsage.value.left.width = 0
  spaceUsage.value.right.height = 0
  spaceUsage.value.right.width = 0
}
/** 左侧高度使用 */
export const leftHeightUsage = (container: PIXI.Container): void => {
  spaceUsage.value.left.height += container.height + 26
}
/** 左侧宽度使用*/
export const leftWidthUsage = (container: PIXI.Container): void => {
  spaceUsage.value.left.width = Math.max(spaceUsage.value.left.width, container.width)
}
/** 右侧高度使用 */
export const rightHeightUsage = (container: PIXI.Container): void => {
  spaceUsage.value.right.height += container.height + 26
}

/** 卡牌种类映射 */
const typeKeyRef = ref<Record<string, number>>({})
export const setTypeKey = (key: string, container: PIXI.Container): void => {
  typeKeyRef.value[key] = container.uid
}
/** 卡牌类别映射 */
const categoryKeyRef = ref<Record<string, number>>({})
export const setCategoryKey = (key: string, container: PIXI.Container): void => {
  categoryKeyRef.value[key] = container.uid
}
/** 卡牌五行映射 */
const elementKeyRef = ref<Record<string, number>>({})
export const setElementKey = (key: string, container: PIXI.Container): void => {
  elementKeyRef.value[key] = container.uid
}
/** 卡牌品阶映射 */
const rankKeyRef = ref<Record<string, number>>({})
export const setRankKey = (key: string, container: PIXI.Container): void => {
  rankKeyRef.value[key] = container.uid
}
/** 卡牌系列映射 */
const seriesKeyRef = ref<Record<string, number>>({})
export const setSeriesKey = (key: string, container: PIXI.Container): void => {
  seriesKeyRef.value[key] = container.uid
}

export default computed(() => {
  const { scale } = mainStore.getAppAttr
  return {
    fontSize: 40,
    fill: 0x333333,
    width: width.value / scale, //宽度
    height: height.value / scale, // 高度
    // leftWidth: ((width.value / scale) * 40) / 1366,
    // leftHeight: ((height.value / scale) * 9) / 91 + 10,
    startWidth: ((width.value / scale) * 40) / 1366 + 10,
    startHeight: ((height.value / scale) * 9) / 91 + 10,
    leftUsageHeight: spaceUsage.value.left.height, //选项左侧使用高度
    leftUsageWidth: spaceUsage.value.left.width, //选项左侧使用宽度
    rightUsageHeight: spaceUsage.value.right.height, // 选项右侧使用高度
    rightUsageWidth: spaceUsage.value.right.width, //选项右侧使用宽度
    previewHeight: (778 * bgScaleRef.value.y) / 2, // 预览部分高度
    previewWidth: ((923 + 1369) / 2) * bgScaleRef.value.x, // 预览部分宽度
    bgScale: bgScaleRef.value,
    typeKey: typeKeyRef.value, // 卡牌种类
    categoryKey: categoryKeyRef.value, // 卡牌系列
    elementKey: elementKeyRef.value, // 卡牌五行
    rankKey: rankKeyRef.value, // 卡牌品阶
    seriesKey: seriesKeyRef.value, // 卡牌系列
  }
})
